<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Arthur - Chapter 5</title>
	<link rel="stylesheet" href="/strophe/public/css/jquery-ui-1.8.21.custom.css">
	<link rel="stylesheet" href="/strophe/public/css/arthur.css">
	<script type="text/javascript" src="/strophe/public/js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="/strophe/public/js/jquery-ui-1.8.21.custom.min.js"></script>
	<script type="text/javascript" src="/strophe/public/js/strophe.js"></script>
	<script type="text/javascript" src="/strophe/public/js/flXHR.js"></script>
	<script type="text/javascript" src="/strophe/public/js/strophe.flxhr.js"></script>
	<script type="text/javascript">
		var Arthur = {
			connection: null,
			
			handleMessage: function(message) {
				var delayed = $(message).find('delay').length > 0;
				if ($(message).attr('from').match(/^ejaeho@openfire/)) {
// 					var body = $(message).children('body').text();
// 					$('#stream').prepend("<div>" + body + "</div>");

					var body = $(message).find('html > body').contents();
					
					var div = $("<div></div>");
					
					if (delayed) {
						div.addClass('delayed');
					}
					
					body.each(function() {
						if (document.importNode) {
							$(document.importNode(this, true)).appendTo(div);
						}
						else {
							// IE workaround
							div.append(this.xml);
						}
					});					
					
					div.prependTo("#stream");
				}
				
				return true;
			}
		};
		
		$(document).ready(function() {
			$('#login_dialog').dialog({
				autoOpen: true,
				draggable: false,
				modal: true,
				title: 'Connect to XMPP',
				buttons: {
					"Connect": function() {
						$(document).trigger('connect', {
							jid: $('#jid').val(),
							password: $('#password').val()
						});
						
						$('#password').val('');
						$(this).dialog('close');
					}
				}
			});
			
			$('#input').keyup(function() {
				var left = 140 - $(this).val().length;
				$('#counter .count').text('' + left);
			});
			
			$('#input').keypress(function(ev) {
				if (ev.which == 13) {
					ev.preventDefault();
					
					var text = $(this).val();
					$(this).val('');
					
					var message = $msg({to: "ejaeho@openfire", type: "chat"}).c('body').t(text);
					Arthur.connection.send(message);
				}
			});
		});
		
		$(document).bind('connect', function(ev, data) {
			var conn = new Strophe.Connection('http://172.20.240.227:7070/http-bind/');
			conn.connect(data.jid, data.password, function(status) {
				if (status == Strophe.Status.CONNECTED) {
					$(document).trigger('connected');
				}
				else if (status == Strophe.Status.DISCONNECTED) {
					$(document).trigger('disconnected');
				}				
			});
			
			Arthur.connection = conn;
		});
		
		$(document).bind('connected', function() {
			Arthur.connection.addHandler(Arthur.handleMessage, null, "message", "chat");
			Arthur.connection.send($pres());
			$('#stream').prepend("<div>Connected to XMPP server.</div>");
		});
		
		$(document).bind('disconnected', function() {
			
		});
	</script>
</head>
<body>
	<h1>Arthur</h1>
	
	<textarea id="input" rows="3"></textarea>
	<div id="counter"><span class="count">140</span> chars left</div>
	<div id="stream"></div>
	
	<!-- login dialog -->
	<div id="login_dialog" class="hidden">
		<label>JID:</label><input type="text" id="jid" value="sejoonlim@openfire">
		<label>Password:</label><input type="password" id="password" value="welcome1">
	</div>
</body>
</html>